<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<p align="center">用户界面</p>
			<!-- 返回键 -->
			<GoBackButton></GoBackButton>
		</header>
		<UpperBox></UpperBox>
		
		<!-- 顶部信息部分 -->
		<div class="user-top-box">
			<div class="top-box">
				<div class="user-img-box">
					<img :src="user.userImg">
				</div>
				<div class="user-info-box">
					<span>{{ user.userName }}</span>
					<span>{{ user.userId }}</span>
				</div>
			</div>

			<!-- 会员信息 -->
			 <div class="vip-box">
				<div class="vip-info">
					<div class="vip-left">
						<i class="fa fa-diamond" aria-hidden="true"></i>
						<span class="l-left">超级会员</span>
						<i class="fa fa-circle"></i>
						<span class="l-right">每月享超值权益</span>
					</div>
					<div class="vip-right" @click="toSuperVipInfo">
						<span>立即开通</span>
						<i class="fa fa-angle-right" aria-hidden="true" @click=""></i>
					</div>
				</div>
			 </div>

		</div>


		<!-- 中间部分 -->
		<div class="mid-box">
			<ul>
				<li @click="toOrderList">
					<i class="fa fa-file-text" aria-hidden="true"></i>
					<span>我的订单</span>
				</li>
				<li>
					<i class="fa fa-database" aria-hidden="true"></i>
					<span>我的积分</span>
				</li>
				<li @click="toUserWallet">
					<i class="fa fa-envelope" aria-hidden="true"></i>
					<span>我的钱包</span>
				</li>
			</ul>
		</div>

		<!-- 下方列表 -->
		 <div class="tunder-box">
			<ul>
				<li @click="EditUserInfo">
					<div class="left">
						<i class="fa fa-user-o"></i>
						<span>修改资料</span>
					</div>
					<div class="right">
						<i class="fa fa-angle-right"></i>
					</div>
				</li>
				<li @click="toVIPIndex">
					<div class="left">
						<i class="fa fa-diamond"></i>
						<span>VIP入口</span>
					</div>
					<div class="right">
						<i class="fa fa-angle-right"></i>
					</div>
				</li>
				<li @click="toStudentBusinessList">
					<div class="left">
						<i class="fa fa-mortar-board"></i>
						<span>学生入口</span>
					</div>
					<div class="right">
						<i class="fa fa-angle-right"></i>
					</div>
				</li>
				<li @click="toBusinessManagement">
					<div class="left">
						<i class="fa fa-cny"></i>
						<span>商家入口</span>
					</div>
					<div class="right">
						<i class="fa fa-angle-right"></i>
					</div>
				</li>
				<li @click="logOut">
					<div class="left">
						<i class="fa fa-external-link"></i>
						<span>退出登录</span>
					</div>
					<div class="right">
						<i class="fa fa-angle-right"></i>
					</div>
				</li>
				<li @click="deleteUser">
					<div class="left">
						<i class="fa fa-exclamation"></i>
						<span>注销用户</span>
					</div>
					<div class="right">
						<i class="fa fa-angle-right"></i>
					</div>
				</li>
			</ul>
		 </div>

		<!-- 底部 -->
		<UnderBox></UnderBox>

		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>
<script>
	import Footer from '../components/Footer.vue';
	import UpperBox from '../components/UpperBox.vue';
	import UnderBox from '../components/UnderBox.vue';
	import GoBackButton from '../components/GoBackButton.vue';

	export default {
		name: 'UserInformation',
		data() {
			return {
				user: {}
			}
		},
		created() {
			//todo
			this.user = this.$getSessionStorage('user');
			this.$axios.get('users/' + this.user.userId
			).then(response => {
				this.user.userImg = response.data.userImg;
			}).catch(error => {
				console.error(error);
			});
			
		},
		methods: {
			toSuperVipInfo() {
				this.$router.push({
					path: '/superVIPInfo'
				})
			},
			toUserWallet() {
				this.$router.push({
					path: '/userWallet'
				})
			},
			toVIPIndex() {
				if(this.user.isVIP==0) {
					alert('请先开通VIP');
					return;
				}
				this.$router.push({path:'/vIPIndex'});
			},
			toOrderList(){
				this.$router.push({path:'/orderList'});
			},
			EditUserInfo(){
				this.$router.push({path:'/editUserInfo'});
			},
			toStudentBusinessList() {
				this.$router.push({path:'/tJUBusinessList'});
			},
			logOut() {
				sessionStorage.clear();
				this.$router.go(-1);
				alert("退出登录成功")
			},
			deleteUser() {
				//todo
				this.$axios.delete(
					'users',
					{
						data: {
							userId: this.user.userId
						},
						headers: {
							'Content-Type': "application/json"
						}
					}
				).then(response => {
					if (response.data > 0) {
						alert('注销用户成功！');
						this.$router.replace({path:'/index'});
					} else {
						alert('注销用户失败！');
					}
				}).catch(error => {
					console.error(error);
				});
			},
			toBusinessManagement() {
				this.$router.push({
					path: '/businessManagement'
				})
			}
		},
		components: {
			Footer,
			GoBackButton,
			UnderBox,
			UpperBox
		}
	}
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapper .user-top-box {
		width: 100%;
		height: 45vw;
		display: flex;
		align-items: center;
		flex-direction: column;
		background-image: url('/src/assets/ub_01.png');
		background-size: cover;
	}

	.wrapper .user-top-box .vip-box {
		width: 90%;
		height: 100%;
		background-color: #f2d284;
		border-radius: 2.5vw 2.5vw 0 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapper .user-top-box .vip-box .vip-info {
		width: 100%;
		display: flex;
		text-align: center;
		justify-content: space-between;

		
	}

	.wrapper .user-top-box .vip-box .vip-info .vip-left .fa-diamond {
		margin-left: 1vw;
		font-size: 5vw;
	}

	.wrapper .user-top-box .vip-box .vip-info .vip-left .l-left {
		font-size: 5vw;
		font-family: "微软雅黑";
		font-weight: 500;
	}

	.wrapper .user-top-box .vip-box .vip-info .vip-left .fa-circle {
		margin-left: 1vw;
		margin-right: 1vw;
	}

	.wrapper .user-top-box .vip-box .vip-info .vip-right {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapper .user-top-box .vip-box .vip-info .vip-right span {
		margin-left: 1vw;
		margin-right: 1vw;
		font-size: 3vw;
		font-family: "微软雅黑";
	}

	.wrapper .user-top-box .vip-box .vip-info .vip-right .fa-angle-right {
		margin-right: 1vw;
		font-size: 4vw;
	}

	.wrapper .user-top-box .top-box {
		display: flex;
		justify-content: center;
		align-items: center;
		background: transparent;
		margin-top: 5vw;
		margin-bottom: 5vw;
	}

	.wrapper .user-top-box .top-box .user-img-box {
		margin-right: 2vw;
	}

	.wrapper .user-top-box .top-box  img {
		height: 25vw;
		border-radius: 50%;
	}

	.wrapper .user-top-box .top-box .user-info-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: transparent;
		text-align: center;
	}

	.wrapper .user-top-box .top-box .user-info-box span {
		font-size: 4vw;
		font-family: "微软雅黑";
		color: #ffffff;
		font-weight: 500;
		margin-top: 1.25vw;
		margin-bottom: 1.25vw;
	}

	.wrapper .mid-box {
		width: 100%;
		height: 25vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .mid-box ul {
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-left: 10vw;
		margin-right: 10vw;
	}

	.wrapper .mid-box ul li {
		display: flex;
		flex-direction: column;
	}

	.wrapper .mid-box ul li i {
		font-size: 8vw;
		color: #c430e9;
		text-align: center;
	}

	.wrapper .mid-box ul li span {
		font-size: 4vw;
		font-family: "微软雅黑";
		font-weight: 550;
		margin-top: 2vw;
	}

	.wrapper .mid-box {
		border-bottom: #ffffff 1vw solid;
	}

	.wrapper .tunder-box .fa-user-o {
		margin-right: 6vw;
	}
	
	.wrapper .tunder-box .fa-diamond {
		margin-right: 4vw;
	}

	.wrapper .tunder-box .fa-cny {
		margin-right: 8vw;
	}

	.wrapper .tunder-box .fa-external-link {
		margin-right: 5vw;
	}

	.wrapper .tunder-box .fa-exclamation {
		margin-right: 9vw;
	}

	.wrapper .tunder-box li {
		display: flex;
		justify-content: space-between;
		padding: 3vw 3vw 3vw 3vw;
		border-top: #d3d3d3 1vw solid;
	}

	.wrapper .tunder-box li i {
		font-size: 7vw;
		color: #c430e9;
		margin-right: 3vw;
	}

	.wrapper .tunder-box li span {
		font-size: 4vw;
		font-family: "微软雅黑";
		font-weight: 500;
	}

	.wrapper .under-box {
		border-top: #d3d3d3 1vw solid;
	}

</style>